import React from 'react';

const TabBar = () =>
{
    // react-router的api
    const navigate = useNavigate();
    // location是
    const location = useLocation();

    const [active,SetActive] = useState<string>(location.pathname ?? '/');

    const OnChange = (key:string) =>
    {
        SetActive(key);

        navigate(key);
    }

    return (
        <div className='footer'>
            <React.UI.TabBar onChange={OnChange} activeKey={active}>
                <React.UI.TabBar.Item
                    key={'/'}
                    title={'首页'}
                    icon={<React.Icons.AppOutline />}
                />

                <React.UI.TabBar.Item
                    key={'/business'}
                    title={'我的'}
                    icon={<React.Icons.UserOutline />}
                />
            </React.UI.TabBar>
        </div>
    )
}

export default TabBar;